<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../static/css/aui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../../lib/swiper/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../../lib/mescroll/mescroll.min.css"/>
		<title>顶部选项卡-左右滑动翻页+上下拉加载刷新</title>
		<style>
			.aui-nav{width: 100%; height: 50px; overflow-x: scroll; padding: 0; box-sizing: border-box; background: #FFF; display: flex; justify-content: space-between; position: relative; z-index: 1;}						
			.aui-nav::-webkit-scrollbar {height: 0px;}
			.aui-nav-items{width: auto; display: flex; justify-content: space-around; white-space: nowrap; background: #FFF; padding: 0 15px;}
			.aui-nav-item{height: 100%; line-height: 50px; font-size: 16px; padding: 0 15px; color: #333; box-sizing: border-box; display: inline-block; vertical-align: top;}
			.aui-nav-item.active{color: var(--aui-blue); font-size: 17px;}
			.aui-nav-border{width: 35px; height: 4px; -webkit-transition: all .3s; transition: all .3s; background: var(--aui-blue); border-radius: 10px; display: inline-block; position: absolute; bottom: 0; left: 8%;}
			
			.mescroll{width: 100vw !important; height: -webkit-calc(100vh - 100px); height: calc(100vh - 100px);}
			.data-list{width: 100%; padding: 15px 15px 0 15px; box-sizing: border-box;}
			.data-list .list:last-child{margin-bottom: 0;}
			.mescroll-empty{padding-top: 15vh;}
			.mescroll-downwarp .downwarp-progress,
			.mescroll-upwarp .upwarp-progress{width: 20px; height: 20px; border: none; color: var(--aui-red-f5); position: relative; top: -1px;}
			.mescroll-downwarp .downwarp-progress i,
			.mescroll-upwarp .upwarp-progress i{display: inline-block; text-align: center; font-size: 20px;}
			.mescroll-downwarp .downwarp-tip,
			.mescroll-upwarp .upwarp-tip,
			.mescroll-upwarp .upwarp-nodata{position: relative; top: 1px; font-size: 13px;}
			.mescroll-rotate{animation: mescrollRotate .5s linear infinite;}
			.list{width: 100%; background: #FFF; border-radius: 5px; margin-bottom: 15px; position: relative;}
		</style>
	</head>
	<body>		
	    <div class="aui-container" id="app">
			<header class="aui-header">
				<a class="aui-header-left" onclick="aui.closeWin()"><i class="iconfont iconreturn"></i></a>
				<div class="aui-header-title" style="font-size: 15px;">顶部选项卡-左右滑动翻页+上下拉加载刷新</div>
			</header>
	    	<div class="aui-content" v-cloak  >				
				<nav class="aui-nav row-after">
					<div class="aui-nav-items">
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==0}" index="0" @click.stop="changeNav($event)">全部</div>
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==1}" index="1" @click.stop="changeNav($event)">待付款</div>					
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==2}" index="2" @click.stop="changeNav($event)">待收货</div>					
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==3}" index="3" @click.stop="changeNav($event)">已完成</div>
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==4}" index="4" @click.stop="changeNav($event)">已评价</div>
						<div class="aui-nav-item" :class="{'active' : currentNavIndex==5}" index="5" @click.stop="changeNav($event)">已退款</div>
						<span class="aui-nav-border"></span>
					</div>
				</nav>
				<!--轮播-->
				<div id="swiper" class="swiper-container">
				    <div class="swiper-wrapper">						
				        <!--全部-->
				        <div id="mescroll0" class="swiper-slide mescroll">
				            <ul id="dataList0" class="data-list">
				                <li class="list">
				                    
				                </li>
				            </ul>
				        </div>
				        <!--待付款-->
				        <div id="mescroll1" class="swiper-slide mescroll">
				            <ul id="dataList1" class="data-list">
				                <li class="list">
				                    
				                </li>
				            </ul>
				        </div>
				        <!--待收货-->
				        <div id="mescroll2" class="swiper-slide mescroll">
				            <ul id="dataList2" class="data-list">
				                <li class="list">
				                   
				                </li>
				            </ul>
				        </div>
						<!--已完成-->
						<div id="mescroll3" class="swiper-slide mescroll">
						    <ul id="dataList3" class="data-list">
						        <li class="list">
						            
						        </li>
						    </ul>
						</div>
						<!--已评价-->
						<div id="mescroll4" class="swiper-slide mescroll">
						    <ul id="dataList4" class="data-list">
						        <li class="list">
						            
						        </li>
						    </ul>
						</div>
						<!--已退款-->
						<div id="mescroll5" class="swiper-slide mescroll">
						    <ul id="dataList5" class="data-list">
						        <li class="list">
									
						        </li>
						    </ul>
						</div>
				    </div>
				</div>
				
	    	</div>			
	    </div>
		<script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	    <script type="text/javascript" src="../../../lib/vue.min.js"></script>
	    <script type="text/javascript" src="../../../lib/jquery/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="../../../lib/swiper/swiper-2.3.1.min.js"></script>
		<script type="text/javascript" src="../../../lib/mescroll/mescroll.min.js"></script>
	    <script type="text/javascript" src="../../../static/js/aui.min.js"></script>
	   	<script type="text/javascript">
	   		window.onload = function(){				
	   			apiready();
	   		}
	   		apiready = function() {
	   			var vm = new Vue({
	   				el: "#app",
	   				data: {							   					
						currentNavIndex: 0,
	   				},
	   				created: function(){
	   					var _this = this;
	   				},
	   				mounted: function() {
	   					var _this = this;
						_this.slideFn();
						//初始化导航栏底部选中底线位置
						aui.resetNavBorder(".aui-nav", '.aui-nav-item', '.aui-nav-border', 0); 
	   	            },
	   	            updated: function () {
	   	                var _this = this;
	   	                _this.$nextTick(function () {
	   		
	   	                })
	   	            },
	   	            methods: {
						changeNav(e){
							var _this = this,
								el = e.currentTarget,
								index = Number($(el).attr("index"));
							_this.currentNavIndex = index;
							//设置导航栏底部选中底线位置
							aui.resetNavBorder(".aui-nav", '.aui-nav-item', '.aui-nav-border', _this.currentNavIndex); 							
						},	
						slideFn: function(){
						    var _this = this;
						    var curNavIndex = 0;
						    var mescrollArr = new Array(6); //2个菜单所对应的2个mescroll对象
						    //初始化首页
						    mescrollArr[0] = initMescroll("mescroll0", "dataList0");
						    /*初始化轮播*/
						    var swiper = $('#swiper').swiper({
						        onTransitionEnd: function(swiper) {
						            var i = swiper.activeIndex; //轮播切换完毕的事件
						            changePage(i);
						        }
						    });
							// 当页面路径中存在pageindex，则自动切换页面至pageindex
							if(aui.isDefine(aui.getUrlstr("pageindex"))){
								swiper.slideTo(Number(aui.getUrlstr("pageindex")));
							}
						    /*初始化菜单*/
						    $("#nav p").click(function() {
						        var i = Number($(this).attr("i"));
						        swiper.slideTo(i); //以轮播的方式切换列表
						    })
						    /*切换列表*/
						    function changePage(i) {
						        if (curNavIndex != i) {
						            //更改列表条件
						            $("#nav p").each(function(n, dom) {
						                if (dom.getAttribute("i") == i) {
						                    dom.classList.add("active");
						                } else {
						                    dom.classList.remove("active");
						                }
						            })
						            //隐藏当前回到顶部按钮
						            mescrollArr[curNavIndex].hideTopBtn();
						           _this.currentNavIndex = i;
						           //设置导航栏底部选中底线位置
						           aui.resetNavBorder(".aui-nav", '.aui-nav-item', '.aui-nav-border', _this.currentNavIndex); 
						            //取出菜单所对应的mescroll对象,如果未初始化则初始化
						            if (mescrollArr[i] == null) {
						                mescrollArr[i] = initMescroll("mescroll" + i, "dataList" + i);
						            } else {
						                //检查是否需要显示回到到顶按钮
						                var curMescroll = mescrollArr[i];
						                var curScrollTop = curMescroll.getScrollTop();
						                if (curScrollTop >= curMescroll.optUp.toTop.offset) {
						                    // curMescroll.showTopBtn();
						                } else {
						                    curMescroll.hideTopBtn();
						                }
						            }
						            //更新标记
						            curNavIndex = i;
						        }
						    }
						    /*创建MeScroll对象*/
						    function initMescroll(mescrollId, clearEmptyId) {								
						        //创建MeScroll对象,内部已默认开启下拉刷新,自动执行up.callback,刷新列表数据;
						        var mescroll = new MeScroll(mescrollId, {
						           down:{
						           	htmlContent: '<p class="downwarp-progress"><i class="iconfont iconloading7"></i></p><p class="downwarp-tip">加载中</p>', //布局内容									
						           },
						           up: {
						           	htmlLoading: '<p class="upwarp-progress mescroll-rotate"><i class="iconfont iconloading7"></i></p><p class="upwarp-tip">加载中..</p>',
						           	callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { getListData(page); }
						                htmlNodata: '<p class="upwarp-nodata">没有更多了</p>',
						                isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
						                noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
						                empty: {
						                    warpId: clearEmptyId,
						                    icon: "../../img/image/no-data.png", //图标,默认null
						                    tip: '暂无数据', //提示
						                },
						                lazyLoad: {
						                    use: true, // 是否开启懒加载,默认false
						                    attr: 'imgurl',
						                    showClass: 'mescroll-lazy-in',
						                    delay: 200,
						                }
						            }
						        });
						        return mescroll;
						    }
						    /*上拉回调  page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
						    function upCallback(page) {
						        var dataIndex = curNavIndex;
						        dataIndex == 0 ? _this.status = '' :
						        dataIndex == 1 ? _this.status = 2 :
						        dataIndex == 2 ? _this.status = 20 :
						        dataIndex == 3 ? _this.status = 1 : '';
						        //console.log(dataIndex +'-'+_this.status);
						        var timer = setTimeout(function(){
						        	clearTimeout(timer);
									mescrollArr[dataIndex].endByPage(0, 0);
									return;
						        	app.ajax({
						                url: app.url + "member/order-list",
						                type: 'get',
						                data: {
						                    page: page.num,
						                    status: _this.status //状态 0-全部 1-待确认 2-待付款 20-已付款
						                },
						                success: function(ret){
						                    //console.log(JSON.stringify(ret));
						                    var listData=[];
						                    _this.totalSize = ret.data.pages;
						                    if(ret.data && ret.data.items)
						                    {
						                        for (var i = 0; i < ret.data.items.length; i++) {
						                            if(i==ret.data.items.length) break;
						                            listData.push(ret.data.items[i]);
						                        }
												if(page.num == 1)
											   {
												   _this["items" + dataIndex] =  [];
												   if(_this["items" + dataIndex].length == 0){
													   var timer = setTimeout(function(){
														   _this["items" + dataIndex] = _this["items" + dataIndex].concat(listData);
														   clearTimeout(timer);
													   },50);
												   }
											   }
											   else{
												   _this["items" + dataIndex] = _this["items" + dataIndex].concat(listData);
											   }
						                    }
						                    //console.log("dataIndex=" + dataIndex + ", curNavIndex=" + curNavIndex + ", page.num=" + page.num + ", page.size=" + page.size + ", pageData.length=" + listData.length);
						                    mescrollArr[dataIndex].endByPage(listData.length, _this.totalSize);
						                },
						                error: function(ret,err){
						                    //console.log(JSON.stringify(err));
						                    mescrollArr[dataIndex].endErr();
						                }
						            });
						        },1000);
						    }
						},
	   	            }
	   			});
	   		}
	   	</script>
	</body>
</html>
